<template>
  <div>
    <el-row type="flex" justify="center">
      <el-col :span="12" class="avatar">
        <el-avatar
          :size="60" icon="el-icon-user"
          src="https://tse1-mm.cn.bing.net/th/id/OIP.tkxUyfQ0Ccj34gLZoX2wEAAAAA?pid=Api&rs=1">

        </el-avatar>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="12" class="avatar"> {{ userInfo.name }}老师</el-col>
    </el-row>
    <el-menu default-active="/Teacher/TeaMain" router @select="handleSelect">
      <el-menu-item index="/Teacher/TeaMain">
        <i class="el-icon-reading"></i> 个人信息
      </el-menu-item>
      <el-menu-item index="/Teacher/CourseInfo">
        <i class="el-icon-chat-line-square"></i> 课程通知管理
      </el-menu-item>
      <el-menu-item index="/Teacher/CourseFile">
        <i class="el-icon-collection"></i> 课程资料管理
      </el-menu-item>
      <el-menu-item index="/Teacher/HWManage">
        <i class="el-icon-notebook-2"></i> 作业管理
      </el-menu-item>
      <el-menu-item index="/Teacher/StuManage">
        <i class="el-icon-user"></i> 学生信息管理
      </el-menu-item>
<!--      <el-menu-item index="/Teacher/TAManage">-->
<!--        <i class="el-icon-collection"></i> 助教信息管理-->
<!--      </el-menu-item>-->
<!--      <el-menu-item index="/Teacher/TeaDiscussion">-->
<!--        <i class="el-icon-chat-dot-round"></i>课程讨论区-->
<!--      </el-menu-item>-->
    </el-menu>
  </div>
</template>

<script>
import state from '../../store/index'
import tc from '../../store/teacher'

export default {
  computed: {
    userInfo() {
      return state.getters.userInfo
    },
    teacherInfo() {
      return tc.getters.getTeacherInfo
    },
  },
  data() {
    return {};
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      // 重置选择状态
      tc.commit('setChosenClass', null)
      tc.commit('setIsSelectReady', false)
    }
  }
};
</script>

<style scoped>
.avatar {
  font-size: 14px;
  padding: 10px;
  margin: 0 auto;
}

.rolename {
  color: gray;
}
</style>
